<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'DeleteCarPic.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/jPages.css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/zmjs/jPages.js"></script>
	<script>
		function  changeSelect(){
			$("#showbrandpic").html("");
	    	var brandId=$("#branddelete").val();
	    	if($("#branddelete").val()!="xx"){
		    		$.getJSON("GetCarSeriesByBrandIdAction",{"brandId":brandId},function(data){
		    			if(data.carseries.length==0){
		    				document.getElementById("selectCarType").options.length=0;//clear all
		    				var o=document.createElement("option");
							o.innerHTML="--暂无型号--";
							o.setAttribute("value","0000");
							document.getElementById("selectCarType").appendChild(o); 
		    			}else{
		    				document.getElementById("selectCarType").options.length=0;//clear all
		    				var o=document.createElement("option");
							o.innerHTML="--请选择型号--";
							o.setAttribute("value","0000");
							document.getElementById("selectCarType").appendChild(o); 
							$.each(data.carseries,function(index,value){
				    			var o=document.createElement("option");
						    	o.innerHTML=value.seriesName+"";
						    	o.setAttribute("value",value.seriesId);
						    	document.getElementById("selectCarType").appendChild(o); 
		    				});
		    			}
			    	});
	    	}else{
	    			ClearAndInitCarTypeSelect();
	    	}
	    	
	    	if($("#branddelete").val()=="xx"){
	    		$("#showbrandpic").html("请选择车品牌");
	    	}else{
	    		$.getJSON("getThePicsByBrandIdAction",{"brandId":brandId},function(data){
	    			if(data.cartypes.length!=0){
	    				$("#showbrandpic").append("</br>");
	     				$.each(data.cartypes,function(index,value){
	     					$("#showbrandpic").append("<span><img style='margin-top: 15px;padding-top: 15px;' src='CarMark/"+value.typesPic+"' width=160px height=160px/>"+
					     	"<a href='javascript:void(0);' onclick='deleteCarTypeInBrand("+value.typesId+",\""+value.typesPic+"\")'>删除</a><span>"); 
	     				});
	     				Jpages();
	     			}else{
	     				DestoryJpages();
	     				$("#showbrandpic").html("该品牌暂时没有上传图片");
	     			}
	    		});
	    	}
	     }
	     function changeCarType(){
	     	$("#showbrandpic").html("");
	     	if($("#selectCarType").val()=="0000"){
	     		changeSelect();
	     	}else{
     			$.getJSON("GetALLCarTypesBySeriesIdAction",{"SeriesId":$("#selectCarType").val()},function(data){
	     			if(data.carTypes.length!=0){
	     				$("#showbrandpic").append("</br>");
	     				$.each(data.carTypes,function(index,value){
	     					$("#showbrandpic").append("<span><img src='CarMark/"+value.typesPic+"' width=160px height=160px/>"+
					     	"<a href='javascript:void(0);' onclick='deleteCarType("+value.typesId+",\""+value.typesPic+"\")'>删除</a><span>"); 
	     				});
	     				Jpages();
	     			}else{
	     				DestoryJpages();
	     				$("#showbrandpic").html("该车型暂时没有上传图片");
	     			}
	     		});
	     	}
		     
	     }
	     
	     function deleteCarTypeInBrand(cartypeid,picName){
	     	 alert(cartypeid);
	     	 $.post("DeleteCarTypesByCarTypesIdAction?time="+Math.random(),{"cartypeid":cartypeid,"PicName":picName},function(data){
	     	 		if(data=="success"){
	     	 			changeSelect();
	     	 		}else{
	     	 			alert("删除失败");
	     	 		}
	     	 });
	     }
	     function deleteCarType(cartypeid,picName){
	     	 alert(cartypeid);
	     	 $.post("DeleteCarTypesByCarTypesIdAction?time="+Math.random(),{"cartypeid":cartypeid,"PicName":picName},function(data){
	     	 		if(data=="success"){
	     	 			changeCarType();
	     	 		}else{
	     	 			alert("删除失败");
	     	 		}
	     	 });
	     }
	     function ClearAndInitCarTypeSelect(){
	    			document.getElementById("selectCarType").options.length=0;
					var o=document.createElement("option");
				    o.innerHTML="未选择车型";
				    o.setAttribute("value","xx");
				    document.getElementById("selectCarType").appendChild(o);
	    }
	    function Jpages(){
	    		 $("div.holder").jPages({
	        			containerID    : "showbrandpic",
	        			 perPage      : 8,
        				 startPage    : 1,
       					 startRange   : 1,
                         midRange     : 5,
                         endRange     : 1
    			});
	    }
	    function DestoryJpages(){
	    		 $("div.holder").jPages("destroy");
	    }
	</script>
  </head>
  
  <body>
 	 	<div align="center"><h2>删除车型图片</h2></div>
  		<!-- <div style="position: absolute; left: 300px;top: 100px;">  -->
			<div align="center">
				<div>
					<select name="brand"  id="branddelete" style="width: 135px;" onchange="changeSelect()">
						<option value="xx">--请选择车系列--</option>
						<c:forEach items="${brands}" var="brand">
							<option value="${brand.brandsId}">${brand.brandsName}</option>
						</c:forEach>
					</select>
					<select id="selectCarType" onchange="changeCarType()">
						<option value="xx">未选择车型</option>
					</select>
			   </div>
       	  </div>
      <!--  <div id="content" align="center" style="position: absolute; left: 300px;top: 140px;"> -->
       	<div align="center" id="showbrandpic_out">
       			<div id="showbrandpic" >
				</div>
				<div class="holder"></div>
       </div>
       	<img alt="" src="" style="margin: 5px;padding: 5px;">
		
  </body>
</html>
